<template lang="html">
  <div>
    <div>
      <ul class="bg-fff postop">
        <li class="pd-15 w-20" @click="type=0" :class="{'select':type==0}">全部订单</li>
        <li class="pd-15 w-20" @click="type=1" :class="{'select':type==1}">待付款</li>
        <li class="pd-15 w-20" @click="type=2" :class="{'select':type==2}">待发货</li>
        <li class="pd-15 w-20" @click="type=3" :class="{'select':type==3}">待收货</li>
        <li class="pd-15 w-20" @click="type=4" :class="{'select':type==4}">待评价</li>
      </ul>
    </div>
    <div class="content tl">
      <div v-if="list.length>0">
        <scroller style="top:2.3rem" :on-refresh="refresh" ref="my_scroller">

          <div class="mt-10 bg-fff" v-for="item in list">
            <router-link :to="{ name: '', params: {} }">
              <div class="clearfix pd-15 my-line pl-14">
                <div class="fl my-12-55">
                  <span>订单号：201804409899</span>
                </div>
                <!-- <div class="fr my-12-f7red pr-16">全部订单</div> -->
                <div class="fr my-12-f7red pr-16" v-if="item.status == 11">待付款</div>
                <div class="fr my-12-f7red pr-16" v-if="item.status == 20">待发货</div>
                <div class="fr my-12-f7red pr-16" v-if="item.status ==30">待收货</div>
                <div class="fr my-12-f7red pr-16" v-if="item.status == 40 && item.evaluation_status == 0">待评价</div>
                <div class="fr my-12-f7red pr-16" v-if="item.status == 40 && item.evaluation_status == 1">已完成</div>
              </div>
            </router-link>
            <router-link :to="{ name: '', params: {} }">
              <ul>
                <li class="pd-15 my-line clearfix">
                  <div class="fl w1 pl-14">
                    <img class="my-img" src="./images/goodimg.png">
                  </div>
                  <div class="fl w2 pl-14 mt-10">
                    <div class="my-15-33 two-line pl-10">53茅台王子酒500ml</div>
                    <div class="clearfix my-13-22">
                      <div class="fl my-14-f7red">￥118/瓶</div>
                      <div class="fr pr-13 my-14-25">x1</div>
                    </div>
                  </div>
                </li>
              </ul>
            </router-link>
            <div class="left my-12-22 p15">
              <div style="font-size:">共计:<span class="ml-10 my-14-f7red">￥1000</span>
                <div class="fr" v-if="item.status == 11">
                  <div class="fr detail">立即付款</div>
                  <div class="fr ml-10 cancel">取消订单</div>
                </div>

                <div class="fr" v-if="item.status == 20">
                  <router-link :to="{ path: '/my_order_detail/', query: {id:1} }">
                    <div class="fr detail">查看详情</div>
                  </router-link>
                  <div class="fr ml-10 cancel">取消订单</div>
                </div>

                <div class="fr" v-if="item.status == 30">
                  <router-link :to="{ path: '/my_order_detail/', query: {id:1} }">
                  <div class="fr detail">查看详情</div>
                  </router-link>
                </div>

                <div class="fr" v-if="item.status == 40 && item.evaluation_status == 0">
                  <div class="fr detail">立即评价</div>

                </div>

                <div class="fr" v-if="item.status == 40 && item.evaluation_status == 1">
                  <!-- <div class="fr detail">立即付款</div>
                  <div class="fr ml-10 cancel">取消订单</div> -->
                </div>
              </div>
            </div>
          </div>

        </scroller>
      </div>
      <div class="nodata" v-if="list.length<1">
        <img src="./images/no-order.svg"> <span>您还没有订单</span>
        <div class="btn-go mt-50">去购物</div>
      </div>
    </div>
  </div>

</template>

<script>
  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  export default {
    components: {},
    data(){
      return {
        type: this.$route.query.type || 0,
        list: [
          {
            status: 11,
          }, {
            status: 20,
          }, {
            status: 30,
          }, {
            status: 40,
            evaluation_status: 0,
          }, {
            status: 40,
            evaluation_status: 1,
          }
        ],
      };
    },
    mounted(){

    },
    methods: {
      refresh (done) {
        if (this.list.length) {
          this.list.length = 0
        }
      },

    },

  }
</script>

<style scoped>
  .postop{
    width:100%;
    height:2.3rem;
    position:fixed;
    left:0;
    z-index:100;
  }
  .num{
    width:.8rem;
    height:.8rem;
    line-height:.8rem;
    background:#f23030;
    border-radius:100%;
    color:#ffffff;
    font-size:.6rem;
    text-align:center;
  }
  .p2{
    position:absolute;
    top:.25rem;
    left:35%;
  }
  .p3{
    position:absolute;
    top:.25rem;
    left:55%;
  }
  .p4{
    position:absolute;
    top:.25rem;
    left:75%;
  }
  .p5{
    position:absolute;
    top:.25rem;
    left:95%;
  }
  .w-20{
    width:20%;
    float:left;
    font-size:.7rem;
    color:#333333;
    text-align:center;
  }
  .pd-15{
    padding:.75rem 0;
  }
  .select{
    color:#e80013;
    border-bottom:2px solid #f23030;
  }
  .tl{
    text-align:left;;
  }
  .detail{
    width:4rem;
    text-align:center;
    font-size:.6rem;
    color:#ffffff;
    background-color:#f74c4e;
    border:1px solid #e80013;
    border-radius:1.5rem;
    padding:.2rem 0rem;
    margin-right:.5rem;
    display:absolute;
    margin-right:.75rem;
    margin-top:-.2rem;
  }
  .cancel{
    width:4rem;
    text-align:center;
    border:1px solid #cecece;
    border-radius:1.5rem;
    font-size:.6rem;
    color:#777777;
    padding:.2rem 0;
    display:absolute;
    margin-right:.5rem;
    margin-top:-.2rem;
  }
  .nodata{
    width:100%;
    text-align:center;
    padding-top:30%;
    margin-top:.5rem;
  }
  .nodata span{
    color:#666;
    display:block;
    font-size:.7rem;
    padding-top:.5rem;
  }
  .btn-go{
    display:inline-block;
    font-size:.75rem;
    line-height:1.5;
    background-color:#ffffff;
    color:#f74c4e;
    padding:.45rem 3.9rem;
    border-radius:5rem;
    border:1px solid #f74c4e;
  }
  .my-12-55{
    font-size:.6rem;
    color:#555555;
  }
  .my-15-33{
    font-size:.75rem;
    color:#333333;
  }
  .my-14-f7red{
    color:#f74c4e;
    font-size:.7rem;
  }
  .my-12-f7red{
    color:#f74c4e;
    font-size:.6rem;
  }
  .p15{
    padding:.75rem;
  }
  .my-14-25{
    color:#252525;
    font-size:.7rem;
  }
  .ml-10{
    margin-left:.5rem;
  }
  .right{
    text-align:right;
  }
  .mt-50{
    margin-top:2.5rem;
  }
  .left{
    text-align:left;
  }
  .pl-14{
    padding-left:.7rem;
  }
  .pr-16{
    padding-right:.8rem;
  }
  .pr-13{
    padding-right:.65rem;
  }
  .pdtb-15{
    padding:.25rem 0;
  }
  .my-img{
    width:4rem;
    height:4rem;
  }
  .w1{
    width:4.75rem;
  }
  .w2{
    width:calc(100% - 4.75rem);
  }

</style>
